<template>
	<template v-if="scrollEnable">
		<view class="dam-flex_column dam_sv_page">
			<view :class="'dam_v_header '+(isFixZIndex?'zIndex':'')">
				<slot name="header"></slot>
			</view>
			<scroll-view :scroll-top="scrollLocation" class="dam_sv_content" scroll-y :show-scrollbar="false"
				@scrolltolower="scrollToLower" @scrolltoupper="scrollToUpper" @scroll="scroll" :lower-threshold="0"
				:scroll-with-animation="isAnimation">

				<!--     <view v-if="headerHeight!==''" :style="{height:headerHeight,width:'100%'}">
            </view>
            <view v-else-if="headerHeight===''" style="visibility: hidden; z-index:-999;">
                <slot name="header"></slot>
            </view> -->
				<view class="dam-flex_column dam_v_content" :style="{height:scrollEnable?'auto':'100%'}">
					<slot></slot>
				</view>
			</scroll-view>
			<view :class="'dam_v_footer '+(isFixZIndex?'zIndex':'')">
				<slot name="footer"></slot>
				<view v-if="safeBottomHeight&&safeBottomHeight!=''" class="dam_v_safe_bottom">
				</view>
			</view>
		</view>
	</template>
	<template v-else>
		<view class="dam-flex_column dam_sv_page">
			<view :class="'dam_v_header '+(isFixZIndex?'zIndex':'')">
				<slot name="header"></slot>
			</view>
			<view class="dam-flex_column dam_sv_content">
				<slot></slot>
			</view>
			<view :class="'dam_v_footer '+(isFixZIndex?'zIndex':'')">
				<slot name="footer"></slot>
				<view v-if="safeBottomHeight&&safeBottomHeight!=''" class="dam_v_safe_bottom">
				</view>
			</view>
		</view>
	</template>
</template>

<script lang="ts" setup>
	import { ref, nextTick, watch } from 'vue';
	const props = defineProps({
		// isFixHeader: {
		//     type: Boolean,
		//     default: false
		// },
		// isFixFooter: {
		//     type: Boolean,
		//     default: false
		// },
		/**
		 * 是否可以滑动
		 */
		scrollEnable: {
			type: Boolean,
			default: true
		},
		/**
		 * 设置header的高度，用来避免覆盖
		 */
		headerHeight: {
			type: String,
			default: '0px'
		},
		/**
		 * footer的高度，用来避免覆盖
		 */
		footerHeight: {
			type: String,
			default: '0px'
		},
		/**
		 * 底部安全区域，默认是0，在h5中已有处理，主要是为了在设备HyBird开发中使用
		 */
		safeBottomHeight: {
			type: String,
			default: '0px'
		},
		/**
		 * 底部安全区域颜色，默认是白色
		 */
		safeBottomColor: {
			type: String,
			default: 'white'
		},

		/**
		 * fix的头部和底部是否设置zindex
		 */
		isFixZIndex: {
			type: Boolean,
			default: false
		},

		/**
		 * 是否滚动动画
		 */
		isAnimation: {
			type: Boolean,
			default: false
		}
	});
	defineExpose({
		scrollToTop,
		scrollToBottom
	});

	const emits = defineEmits(['scrollToLower', 'scrollToUpper', 'scroll'])

	//控制滑动位置
	const scrollLocation = ref(1);

	function scroll(e) {
		emits('scroll');
	}

	/**
	 * 滑动到底部监听
	 */
	function scrollToLower() {
		emits('scrollToLower');
	}
	/**
	 * 滑动到顶部监听
	 */
	function scrollToUpper() {
		emits('scrollToUpper');
	}
	/**
	 * 滚动到顶部
	 */
	function scrollToTop() {
		scrollLocation.value = 1;
	}

	/**
	 * 滚动到底部
	 */
	function scrollToBottom() {
		if (scrollLocation.value == 999999999999) {
			nextTick(() => {
				scrollLocation.value = 1000000000000;
			})
		} else {
			nextTick(() => {
				scrollLocation.value = 999999999999;
			})
		}
	}
</script>

<style lang="scss">
	@import "/dam_uni_frame/styles/dam_theme_common.scss";

	.dam_sv_page {
		height: 100%;
		width: 100%;
		// margin-top: v-bind(headerHeight);
		position: relative;
	}

	.dam_sv_content {
		height: calc(100% - v-bind(safeBottomHeight) - v-bind(footerHeight) - v-bind(headerHeight));
		margin-top: v-bind(headerHeight);

		.dam_v_content {
			// height: 100%;
		}
	}

	// .dam_v_content {
	// 	margin-top: v-bind(headerHeight);
	// 	height: calc(100% - v-bind(safeBottomHeight) - v-bind(footerHeight) - v-bind(headerHeight));
	// }

	.dam_v_header {
		width: 100%;
		height: v-bind(headerHeight);
		position: absolute;
		top: 0;
	}

	.dam_v_header.zIndex {
		z-index: $z-index-top;
	}

	.dam_v_footer {
		width: 100%;
		height: v-bind(footerHeight);
		position: absolute;
		bottom: 0;
	}

	.dam_v_footer.zIndex {
		z-index: $z-index-bottom;
	}

	.dam_v_safe_bottom {
		height: v-bind('safeBottomHeight');
		background-color: v-bind('safeBottomColor');
	}
</style>